<template>
  <div class="invite">
    <back title="邀请有礼"></back>

    <btn @click.native="onShare">分享</btn>
    <mask-layer :show="showMask" anim="up" @hide="showMask=!showMask">
      <ul class="share-list cen" flex="box:mean">
        <li @click="toShare(item.text)" v-for="(item,index) in shareList" :key="index">
          <img :src="item.src"><br>
          {{item.text}}
        </li>
      </ul>
    </mask-layer>
  </div>
</template>

<script>
import MaskLayer from '@/components/MaskLayer'

export default {
  name: 'invite',
  data () {
    return{
      shareList:[
        {text:'微信',src:this.$src+'pro_three1.png'},
        {text:'朋友圈',src:this.$src+'pro_three2.png'},
        {text:'QQ',src:this.$src+'pro_three3.png'},
      ],
      showMask:false
    }
  },
  components:{
    MaskLayer
  },
  methods:{
    onShare(){
      this.showMask=true
    },
    toShare(txt){
      alert('分享到'+txt)
    }
  },
  mounted(){
    
  }
}
</script>

<style lang="less" scoped>
.btn{margin: 10px auto;display: block;width: 90% !important;}
.share-list{
  background: #fff;
  padding: 20px 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
  pointer-events: auto;
  img{
    margin-bottom: 0.2rem;
  }
}
</style>